<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="autoTable">
			<div>
				<span v-for="item in theadList">
					{{item}}:<input type="text"  />
				</span>
				<button>查询</button>
			</div>
			<hr >
			<table border="1" cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<td v-for="item in theadList"><strong>{{item}}</strong></td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="childList in tbodyList">
						<td style="white-space:nowrap" v-for="item in childList">{{item}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./testdata.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#autoTable',
		data: {
			theadList: [],
			tbodyList: []
		},
		created() {
			this.fetchHeadList(exmple.data.list);
			this.parseList(exmple.data.list);
		},
		methods: {
			fetchHeadList(json) {
				let firstObject = json[0];
				for (var key in firstObject) {
					this.theadList.push(key);
				}
			},
			parseList(objs) {
				
				for (var j = 0; j < objs.length; j++) {
					let valueList = new Array();
					let row = objs[j];
					for (var i = 0; i < this.theadList.length; i++) {
						let key = this.theadList[i];
						valueList.push(row[key]);
					}
					this.tbodyList.push(valueList);
				}
			}
		}
	});
</script>
